<script setup>
import gradedata from '../../data/GunGradeData.json'
import AttackItem from './AttackItem.vue'
import SkillItem from './SkillItem.vue'
import { getSkills, getLvUpDesc } from './skill.js'
import jsonToMap from '../../j2m.js'
import './skill.css'

const skillNumMap = {'5': '技能一', '7': '技能二', '4': '制胜技', '8': '被动技'}
const cjkNums = ['一', '二', '三', '四', '五', '六']

const props = defineProps(['uid', 'weaponElem'])

const skills = getSkills(props.uid)

const gradeData = jsonToMap(gradedata.data)
const grades = []
const lvUps = []
for (let g = 2; g < 8; g++) {
  const sid = String(gradeData.get(+`${props.uid}0${g}`)[4])
  grades.push([skillNumMap[sid[5]], sid[7]])
  lvUps.push(sid)
}
</script>

<template>
  <section id="grade">
    <h2>云图强固</h2>
    <table>
      <tr v-for="(vt, idx) of grades">
        <td>椎体·{{ cjkNums[idx] }}</td>
        <td v-html="vt[0] + '升到' + vt[1] + '级：' + getLvUpDesc(lvUps[idx])"></td>
      </tr>
    </table>
  </section>
  <section>
    <h2>技能</h2>
    <AttackItem :data="skills.get('attack')" :weapon-elem="weaponElem" />
    <SkillItem v-for="n in 4" :data="skills.get(n)" :weapon-elem="weaponElem" />
  </section>
</template>

<style scoped>
section {
  grid-area: sk;
}

section#grade {
  grid-area: gr;
}

td:first-child {
  display: flex;
  min-width: 4em;
}
</style>
